<template>
  <div style="height: 100%" class="box">
    <h1 class="h1">各省疫情总览</h1>
    <div class="title">
      <ul>
        <li style="background-color: #00bfff">省份</li>
        <li style="background-color: #ff4500">新增确诊</li>
        <li style="background-color: #ff8c00">累计确诊</li>
        <li style="background-color: #7cfc00">治愈</li>
        <li style="background-color: #808080">死亡</li>
      </ul>
    </div>
    <div
      class="scroll_total"
      :style="{ height: scrollTotalHeight - 43 + 'px' }"
    >
      <div
        class="scroll_total_items"
        v-for="(item, index) in data"
        :key="index"
      >
        <ul>
          <li style="background-color: #00bfff">省份</li>
          <li style="background-color: #ff4500">新增确诊</li>
          <li style="background-color: #ff8c00">累计确诊</li>
          <li style="background-color: #7cfc00">治愈</li>
          <li style="background-color: #808080">死亡</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //元素scroll_total的实时高度
      scrollTotalHeight: null,
      data: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
    };
  },
  mounted() {
    this.getStyleHeight();
    window.addEventListener("resize", () => {
      this.getStyleHeight();
    });
  },
  methods: {
    //控制元素scroll_total的高度
    getStyleHeight() {
      //   //获取box的实时高度
      const box = document.querySelector(".box").offsetHeight;
      //   //获取title的实时高度
      const title = document.querySelector(".title").offsetHeight;
      //获取h1标签的实时高度
      const h1 = document.querySelector(".h1").offsetHeight;
      this.scrollTotalHeight = box - title - h1;
      console.log(this.scrollTotalHeight);
    },
  },
};
</script>

<style lang="less" scoped>
h1 {
  font-size: 0.25rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
  .title {
    width: 97%;
    height: 0.6rem;
    padding-right: 0.375rem;
    ul {
      width: 100%;
      display: flex;
      li {
        margin: 0 0.0375rem;
        border-radius: 0.125rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        height: 100%;
        color: #fff;
        font-size: 0.1625rem;
      }
    }
  }
  .scroll_total {
    margin-top: 0.0625rem;
    overflow: scroll;
    overflow-x: hidden;
    .scroll_total_items {
      display: flex;
      ul {
        display: flex;
        width: 98%;
        li {
          margin: 0.0375rem 0.0375rem;
          border-radius: 0.125rem;
          display: flex;
          justify-content: center;
          align-items: center;
          flex: 1;
          height: 0.5rem;
          color: #fff;
          font-size: 0.1625rem;
        }
      }
    }
  }
  /*滚动条样式*/
  .scroll_total::-webkit-scrollbar {
    width: 0.05rem;
    /*height: 4px;*/
  }
  .scroll_total::-webkit-scrollbar-thumb {
    border-radius: 0.125rem;
    --webkit-box--shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #00ffff;
  }
  .scroll_total::-webkit-scrollbar-track {
    --webkit--box-shadow: inset 0 0 0.0625rem rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.8);
  }
}
</style>